import {useEffect, useState} from "react";


/**
 * useEffect 第一个参数是一个函数，该函数会执行，当第二个参数发生变化时，该函数会重新执行
 * 第一个参数有返回值，该返回值是一个函数，该函数会在组件卸载时执行
 * 第二个参数是一个数组，当数组中的值发生变化时，该函数会重新执行(监视数组中的值发生变化)
 * @returns {JSX.Element}
 * @constructor
 */
const Son = () => {
    useEffect(() => {
        let interval = setInterval(() => {
            console.log('定时器运行中...')
        }, 1000);
        return () => {
            // 清除定时器
            clearInterval(interval)
        }
    }, []);
    return (
        <div>
            <h2>this is son component</h2>
        </div>
    )
}

export const App = () => {
    const [isShow, setIsShow] = useState(true)

    const unmount = () => {
        console.log('卸载son组件')
        setIsShow(false)
    }

    return (
        <div>
            <h2>this is app</h2>
            {isShow && <Son/>}
            <button onClick={unmount}>卸载son组件</button>
        </div>
    )
}
